<template>
  <div class="params-editor">
    <el-table :data="params" style="width: 100%">
      <el-table-column width="40">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.enabled" />
        </template>
      </el-table-column>
      
      <el-table-column prop="key" label="参数名">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.key"
            placeholder="参数名"
            size="small"
            @input="updateParam(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
      
      <el-table-column prop="value" label="参数值">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.value"
            placeholder="参数值"
            size="small"
            @input="updateParam(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
      
      <el-table-column width="80" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="removeParam(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-button
      type="text"
      size="small"
      @click="addParam"
      class="add-btn"
    >
      <i class="el-icon-plus"></i> 添加参数
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'ParamsEditor',
  props: {
    params: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    addParam() {
      this.$emit('add')
    },
    
    updateParam(index, param) {
      this.$emit('update', { index, param })
    },
    
    removeParam(index) {
      this.$emit('remove', index)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../styles/variables.scss';

.params-editor {
  .add-btn {
    margin-top: $spacing-base;
  }
}
</style>